/** 
 * 学习目标:组件通讯-context - 跨组价通信
 * 
+ 思想：**状态提升**
总结：

1. 如果两个组件是远方亲戚（比如，嵌套多层）可以使用Context实现组件通讯
2. Context提供了两个组件：Provider 和 Consumer
3. Provider组件：用来存入数据
4. Consumer组件：用来取出数据
 * */
import React, { Component } from 'react';

// 1. 调用 React. createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件
const { Provider, Consumer } = React.createContext()
/* 
  目标： 使用Context来跨组价通信，让App组件-直接传数据给SonSon组件
*/
export default class App extends React.Component {
    state = {
        msg: 'Hello React'
    }
    render() {
        // 使用Provider组件传数据，设置value属性，value的值即是传递的数据
        return (
            <Provider value={this.state.msg}>
                <div>
                    <h1>父组件</h1>
                    <Son></Son>
                </div>
            </Provider>
        );
    }
}

class Son extends Component {
    render() {
        return (
            <div>
                <h2> 儿子</h2>
                <SonSon></SonSon>
            </div>
        );
    }
}

class SonSon extends Component {
    // 使用Consumer组件接数据，标签内容是一个函数：函数：（接受的value）=> JSX
    render() {
        return (
            <Consumer>
                {data => (
                    <div>
                        <h2> 孙子</h2>{data}
                    </div>

                )}
            </Consumer>
        );
    }
}
